<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>活动详情页</title>
        <base href="${pageContext.request.contextPath}/">
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="css/style.css"/>

    </head>

    <body>
        <!--头部-->
        <div class="header-most-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 col-md-8 col-sm-8 col-12">
                        <div class="main-flex-top">
                            <div class="email sel d-flex">
                                <div class="main-email-text d-flex">
                                    <i class="glyphicon glyphicon-envelope"></i>
                                    <p>123@XZ.com</p>
                                </div>
                                <div class="main-loc-text d-flex">
                                    <i class="glyphicon glyphicon-map-marker"></i>
                                    <p>你梦想中的城市</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-4 col-sm-4 col-12">
                        <div class="login-area">
                            <div class="seclict-area">
                                <i class="glyphicon glyphicon-home" style="color: #e9dbf0;"></i>
                                <select name="cars">
                                    <option value="volvo">CN</option>
                                    <option value="saab">US</option>
                                    <option value="fiat">GE</option>
                                    <option value="audi">FRANCH</option>
                                </select>
                            </div>
                            <div class="user-log">
                                <i class="glyphicon glyphicon-user"></i>
                                <a href="toUserActivity?id=${loginUser.uid}">${loginUser.uname}&nbsp;活动中心&nbsp;|</a>
                               <a href="logdetail/ulog?uname=${loginUser.uname}">日志中心&nbsp;|</a>
                                <a href="users/logout">退出登录</a>
                                <img src="${loginUser.uhead}">
                                <input id="loginUid" type="hidden" value="${loginUser.uid}">
                                <input id="loginUhead" type="hidden" value="${loginUser.uhead}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--导航栏-->
    <header id="top-heder-nav">
        <nav class="navbar navbar-expand-lg" data-toggle="sticky-onscroll">
            <div class="container">
                <a class="navbar-brand" href="index">
                    <img src="img/logo.png" alt="">
                </a>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link active" href="success_index">首页</a></li>
                        <li class="nav-item"><a class="nav-link active" href="l/lindex?id=${loginUser.uname}">旅游日记</a></li>
                        <li class="nav-item"><a class="nav-link active" href="l/aindex?id=${loginUser.uid}">旅游活动</a></li>
                    </ul>
                </div>

                <div class="left-menu-pho">
                    <div class="icon-phon-men">
                        <i class="glyphicon glyphicon-leaf"></i>
                    </div>
                    <div class="phone-number-idel">
                        <h4>世界那么大</h4>
                        <p>我想去看看</p>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!--活动简介-->
    <div id="a-1" style="margin-top: 50px;" class="container">
        <div class="row">
            <div class="col-lg-6 col-md-12">
                <div class="left-side-text-ab max-live">
                    <h2>${activity.atheme}</h2>
                    <input id="atheme" type="hidden" value="${activity.atheme}">
                    <h6>——${activity.alable}</h6>
                    <br>    
                    <p>${activity.aintroduction}</p>
                    <h6>价格说明：￥<span>${activity.amoney}</span></h6>
                    <br>
                    <h6>时间：${activity.abegintime}~${activity.aendtime}</h6>
                    <br>
                    <hr>
                    <p style="float: right;">出发地：${activity.aplace}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;活动人数：${activity.anumber}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;活动报名截止日期：${activity.aentryddl}</p>
                    <p style="display: inline;float: right; ">发布人：${user.uname}&nbsp;<img src="${user.uhead}"></p>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="ab-slider">
                    <div class="slider-main-ab owl-carousel owl-theme">
                        <img style="margin-top: 30px;height: 300px; width: 450px;" src="img/活动缩略图/${activity.aimg}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <hr>
    </div>


    <!-- 图文介绍 start-->
    <!--<h2>图文介绍！！！！</h2>-->
    <div style="width: 1200px; margin: 0 auto;">
        ${activity.adetail}
    </div>

    <!--星星评级-->
    <div style="margin-bottom: 20px;" class="container">
        <div id="star-rank">
            <div id="star1">
                <span>${avgAlevel}</span>分
                <div class="start-icon-des">
                    总体感受&nbsp;
                    <i class="glyphicon glyphicon-star"></i>
                    <i class="glyphicon glyphicon-star"></i>
                    <i class="glyphicon glyphicon-star"></i>
                    <i class="glyphicon glyphicon-star"></i>
                    <i class="glyphicon glyphicon-star"></i>
                </div>
            </div>
            <div id="star2">
                <p>行程安排：<span>${avgA1}</span>分</p>
                <p>司导服务：<span>${avgA2}</span>分</p>
            </div>
            <div id="star3">
                <p>餐饮住宿：<span>${avgA3}</span>分</p>
                <p>客服服务：<span>${avgA4}</span>分</p>
            </div>
        </div>
    </div>

    <!--各种评论-->
    <div class="container">
        <div id="a-comment">
            <c:forEach items="${commentList}" var="c" varStatus="status">
                <div id="con-1">
                    <div id="user-area">
                        <input type="hidden" class="aid" id="id${status.index+1}1" value="${c.id.aid}">
                        <input type="hidden" id="id${status.index+1}2" value="${c.id.uid}">
                        <img src="${userList[status.index].uhead}">
                        <br>                <!-- list从0开始存，index也是从0开始迭代，如果是count的话，由于count是从1开始迭代，需要用count-1-->
                        <font style="font-weight: bold">${userList[status.index].uname}</font>
                        <p style="color: #000; font-size: 12px;">来自慢时光游记</p>
                        <p style="font-size: 12px;">${c.ctime}评</p>
                    </div>
                    <div id="comment-area${status.index+1}" class="comment-area">
                        <p style="font-size: 14px;">添加了对<span style=" color: #ff9d33">${activity.atheme}</span>的评论</p>
                        <p style="font-size: 16px;">${c.cdetail}</p>
                        <a id="id${status.index+1}"  class="bbb glyphicon glyphicon-thumbs-up btn">有用(<span id="id${status.index+1}3">${c.clike}</span>)</a>
                        <a href="javascript:test('${status.index+1}')"  class="aaa glyphicon glyphicon-pencil btn"><span id="id${status.index+1}4">回复/留言</span></a>
                        <hr>           <!--第一个是该活动id 第二个id是登录后的账户名，这里先用发布人的用户名暂代，第三个是被回复的用户id-->

                        <c:forEach items="${recommentList}" var="r" varStatus="status">
                            <c:choose>
                                <c:when test="${r.ruid==c.id.uid}">
                                    <div id="recomment-area">
                                        <div id="re-1">
                                            <p>[${recommentUserList[status.index].uname}回复]</p>
                                        </div>
                                        <div id="re-2">
                                            <p>${r.rdetail}</p>
                                            <p>${r.rtime}&nbsp;&nbsp;&nbsp;来自慢时光游记</p>
                                        </div>
                                    </div>
                                </c:when>
                            </c:choose>
                        </c:forEach>
                    </div>
                </div>
            </c:forEach> 
        </div>
    </div>

    <!--添加评论、以及报名活动-->
    <div style="margin-bottom: 20px;" class="container join">
        <div id="join-1">
            <a href="javascript:add('${loginUser.uname}')" type="button" class="btn btn-default" data-dismiss="modal">添加评论</a>
            <a href="javascript:join()" type="button" class="btn btn-danger">报名</a>
        </div>
    </div>

    <!--     Modal 添加回复-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-danger" id="addModalLabel">回复留言</h2>
                </div>
                <div class="modal-body">
                    <form id="addForm" class="form-inline" method="post">
                        <span>昵称：</span>
                        <input type="text" id="person1" name="productPrice" class="form-control" value="本人是肖战" readonly>
                        <br><br>
                        <span>被评论人：</span>
                        <input type="text" id="person2" name="productUnit" class="form-control" readonly>   
                        <br><br>
                        <%
                            Date d = new Date();
                            SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd ");  //HH:mm:ss
                            String now = df.format(d);
                        %>

                        <span>回复时间：</span>
                        <input type="text" id="reTime" name="productStock" class="form-control" value="<%=now%>" readonly>
                        <br><br>
                        <span>回复内容：</span>
                        <textarea id="reDetail" name="productName" class="form-control" placeholder="在此输入留言"></textarea>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btnAdd" type="button" class="btn btn-danger">添加</button>
                </div>
            </div>
        </div>
    </div>


    <!--     Modal 添加评论-->
    <div class="modal fade" id="addCommentModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-danger" id="addModalLabel">评论留言</h2>
                </div>
                <div class="modal-body">
                    <form id="addForm" class="form-inline" method="post">
                        <span>昵称：</span>
                        <input type="text" id="uname" class="form-control" value="lalala" readonly>
                        <input type="hidden" id="uid" class="form-control" value="${loginUser.uid}" readonly >
                        <br><br>
                        <span>评论时间：</span>
                        <input type="text" id="ctime" class="form-control" value="<%=now%>" readonly>
                        <br><br>
                        <span>评论内容：</span>
                        <textarea id="cdetail"  class="form-control" placeholder="在此输入留言"></textarea>
                        <input type="hidden" id="aid" class="form-control" value="${activity.aid}" readonly> 
                        <input type="hidden" id="clike" class="form-control" value="0" readonly>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="addComment" type="button" class="btn btn-danger">评论</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>                   


    <!--尾部-->
    <div class="footre-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-sm-8 col-8">
                    <div class="copy-right-para">
                        <p>版权所有 &copy; 2019.张彦 陈新 毕爱卿 付丽瑶</p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-4 col-sm-4 col-4">
                    <div class="copy-right-icon">
                        <a href="#"><i class="glyphicon glyphicon-thumbs-up face no-ag"></i></a>
                        <a href="#"><i class="glyphicon glyphicon-gift face"></i></a>
                        <a href="#"><i class="glyphicon glyphicon-heart-empty face"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--尾部结束-->
</body>
    <script>

        var commentid;
//回复留言按钮
        function test(id) {

            var btnId = "id"+id;
            commentid="#comment-area"+id;
//            alert(commentid);

            $.ajax({
                url: 'activity/get_recomment_to_add',
                type: 'POST',
                data: {uid: $("#loginUid").val(), ruid: $("#" + btnId + 2).val()}, //发送一个请求参数，参数名为rid，参数值为传入的rid变量的值
                success: function (data) {
                    $("#person1").val(data.uid);
                    $("#person2").val(data.ruid);
                    $('#addModal').modal('show');
                },
                error: function (req, status, error) {
                    alert("Ajax请求失败，错误：" + error);
                }
            });
        }
//        添加评论按钮
        function add(name) {

            var loginUser = name;

            $("#uname").val(loginUser);
            $('#addCommentModal').modal('show');

        }
//        报名参加的按钮
        function join() {
            
            $.ajax({
                url: "activity/join",
                type: "POST",
                data: {aid: $("#aid").val(),
                        uid: $("#uid").val()},
                success: function (data) {
                    if(data==1){
                        alert("对不起，您已报名参加该行程，不能重复报名！");
                    }else if(data==2){
                        alert("报名成功！")
                    }else if(data==3){
                        alert("对不起，该行程人员已满！");
                    }else{
                        alert("对不起，您的级别不够，无法报名该活动！");
                    }
                },
                error: function (req, status, error) {
                    alert("Ajax请求处理失败，错误：" + error);
                }
            });
        }

        $(document).ready(function () {
//            点赞
            $(".bbb").click(function () {

                var btnId = $(this).attr("id");

                $.ajax({
                    url: "activity/likeNum",
                    type: "POST",
                    data: {id1: $("#" + btnId + "1").val(), id2: $("#" + btnId + 2).val(), num: $("#" + btnId + 3).html()},
                    success: function (data) {
                        $("#" + btnId + 3).html(data);
                    },
                    error: function (req, status, error) {
                        alert("Ajax请求处理失败，错误：" + error);
                    }

                });
            });

//回复评论的添加按钮
            $("#btnAdd").click(function () {

                $.ajax({
                    url: 'activity/add_recomment',
                    type: 'POST',
                    data: {aid: $(".aid").val(),
                        uname: $("#person1").val(),
                        runame: $("#person2").val(),
                        time: $("#reTime").val(),
                        detail: $("#reDetail").val()},
                    success: function (data) {

                        var p = {
                            person1: $("#person1").val(),
                            time: $("#reTime").val(),
                            detail: $("#reDetail").val()
                        };

                        var str = "<div id=\"recomment-area\">"
                                + "<div id=\"re-1\">"
                                + "<p>[" + p.person1 + "回复]</p>"
                                + "</div>"
                                + "<div id=\"re-2\">"
                                + "<p>" + p.detail + "</p>"
                                + "<p>" + p.time + "&nbsp;&nbsp;&nbsp;来自慢时光游记</p>"
                                + "</div>"
                                + "</div>";


                        $(commentid).append(str);  //怎样获取到不同评论区的id值

                        $('#addModal').modal("hide");
                    },
                    error: function (req, status, error) {
                        alert("Ajax请求失败，错误：" + error);
                    }
                });
            });
//添加评论窗口的按钮
            $("#addComment").click(function () {
                $.ajax({
                    url: 'activity/add_comment',
                    type: 'POST',
                    data: {aid: $("#aid").val(),
                        uid: $("#uid").val(),
                        cdetail: $("#cdetail").val(),
                        clike: $("#clike").val(),
                        ctime: $("#ctime").val()
                    },
                    success: function (data) {
                        var c = {
                            uname: $("#uname").val(),
                            ctime: $("#ctime").val(),
                            cdetail: $("#cdetail").val(),
                            clike: $("#clike").val(),
                            uhead: $("#loginUhead").val(),
                            atheme: $("#atheme").val()
                        };

                        var str = "<div id=\"con-1\">"
                                + "<div id=\"user-area\">"
                                + "<img src=" + c.uhead + ">"
                                + "<br>"
                                + "<font style=\"font-weight: bold\">" + c.uname + "</font>"
                                + "<p style=\"color: #000; font-size: 12px;\">来自慢时光游记</p>"
                                + "<p style=\"font-size: 12px;\">" + c.ctime + "评</p>"
                                + "</div>"
                                + "<div class=\"comment-area\">"
                                + "<p style=\"font-size: 14px;\">添加了对<span style=\"color: #ff9d33\">" + c.atheme + "</span>的评论</p>"
                                + "<p style=\"font-size: 16px;\">" + c.cdetail + "</p>"
                                + "<a class=\"bbb glyphicon glyphicon-thumbs-up btn\">有用(<span>" + c.clike + "</span>)</a>"
                                + "<a class=\"aaa glyphicon glyphicon-pencil btn\"><span>回复/留言</span></a>"
                                + "<hr>         "
                                + "</div>"
                                + "</div>";

                        $("#a-comment").append(str);

                        $('#addCommentModal').modal("hide");

                    },
                    error: function (req, status, error) {
                        alert("Ajax请求失败，错误：" + error);
                    }
                });
            });

        });

    </script>


</html>
